<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>制作一个基于Vue的Tabs轮子 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="tabs轮子制作1.先简单实现一下1&amp;lt;div id=&apos;app&apos;&amp;gt;&amp;lt;/div&amp;gt; 1.active&amp;#123;background:red&amp;#125; 1234567891011121314151617181920var vm = new Vue(&amp;#123;    el: &apos;#app&apos;,    data() &amp;#123;        return &amp;#123;">
<meta name="keywords" content="Vue">
<meta property="og:type" content="article">
<meta property="og:title" content="制作一个基于Vue的Tabs轮子">
<meta property="og:url" content="https://storm4542.github.io/archives/88d55ab5.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="tabs轮子制作1.先简单实现一下1&amp;lt;div id=&apos;app&apos;&amp;gt;&amp;lt;/div&amp;gt; 1.active&amp;#123;background:red&amp;#125; 1234567891011121314151617181920var vm = new Vue(&amp;#123;    el: &apos;#app&apos;,    data() &amp;#123;        return &amp;#123;">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.173Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="制作一个基于Vue的Tabs轮子">
<meta name="twitter:description" content="tabs轮子制作1.先简单实现一下1&amp;lt;div id=&apos;app&apos;&amp;gt;&amp;lt;/div&amp;gt; 1.active&amp;#123;background:red&amp;#125; 1234567891011121314151617181920var vm = new Vue(&amp;#123;    el: &apos;#app&apos;,    data() &amp;#123;        return &amp;#123;">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-制作一个vue的tabs轮子" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      制作一个基于Vue的Tabs轮子
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="tabs轮子制作"><a href="#tabs轮子制作" class="headerlink" title="tabs轮子制作"></a>tabs轮子制作</h3><h4 id="1-先简单实现一下"><a href="#1-先简单实现一下" class="headerlink" title="1.先简单实现一下"></a>1.先简单实现一下</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">'app'</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.active</span>&#123;<span class="attribute">background</span>:red&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="number">1</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">       &lt;div class="tabs"&gt;</span></span><br><span class="line"><span class="string">            &lt;ol class="nav"&gt;</span></span><br><span class="line"><span class="string">                &lt;li @click = 'selectedTab = 1' :class ='&#123; active: selectedTab === 1 &#125;'  &gt;tab1&lt;/li&gt;</span></span><br><span class="line"><span class="string">                &lt;li @click = 'selectedTab = 2' :class ='&#123; active: selectedTab === 2 &#125;' &gt;tab2&lt;/li&gt;</span></span><br><span class="line"><span class="string">            &lt;/ol&gt;</span></span><br><span class="line"><span class="string">            &lt;ol class="panels"&gt;</span></span><br><span class="line"><span class="string">                &lt;li :class = '&#123;active : selectedTab === 1&#125;' &gt;content1&lt;/li&gt;</span></span><br><span class="line"><span class="string">                &lt;li :class = '&#123; active: selectedTab === 2 &#125;' &gt;content2 &lt;/li&gt;</span></span><br><span class="line"><span class="string">            &lt;/ol&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>很简单，但是没有复用性。</p>
<h4 id="2-轮子的实现"><a href="#2-轮子的实现" class="headerlink" title="2.轮子的实现"></a>2.轮子的实现</h4><ul>
<li><p>思路：用户如何使用我这个组件呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="number">1</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item&gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item&gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>差不多这样调用，其他的不用管，一个tabs就出来了</p>
</li>
<li><p>开始写，我先声明这些tabs的组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'tabs'</span>,&#123;&#125;)</span><br><span class="line">Vue.component(<span class="string">'tans-navs'</span>,&#123;&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-navs-item'</span>,&#123;&#125;)</span><br><span class="line">Vue.component(<span class="string">'tans-panels'</span>,&#123;&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-panels-item'</span>,&#123;&#125;)</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="number">1</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item&gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item&gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>现在有个问题，我怎么知道要选中那个tab呢?用1，2不大好，所以，改为字符串,并且给下面加上<code>name</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'tabs'</span>,&#123;</span><br><span class="line">    props: [<span class="string">'selectedTab'</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div class='tabs'&gt;</span></span><br><span class="line"><span class="string">            &lt;slot/&gt;  //注意有子元素的话，添加 插槽</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tans-navs'</span>,&#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-navs'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-navs-item'</span>,&#123;</span><br><span class="line">    props: [<span class="string">'name'</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-navs-item'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tans-panels'</span>,&#123;</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-panels'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-panels-item'</span>,&#123;</span><br><span class="line">    props: [<span class="string">'name'</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-panels-item'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="string">'tab1'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs :selectedTab = 'tab1'&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab1' &gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab2' &gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab1'&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab2'&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这样就初见雏形了</p>
</li>
<li><p>下面就是重点了，孙子怎么知道爷爷的 <code>selectedTab</code>的值呢？</p>
<p>答案是通过孙子的爸爸，爸爸获得<code>selectedTab</code>，然后再给孙子，</p>
<p>问题又来了，爸爸怎么从爷爷那里获得呢？</p>
<p><strong>孙子，爸爸自己定义一个属性<code>selectedTab</code>，再写一个<code>methods: SelectedTab(tab)</code>，爷爷遍历所有的爸爸，然后调用爸爸的<code>SelectedTab(tab)</code>把爷爷的<code>selectedTab</code>传给爸爸的<code>selectedTab</code>，同理，爸爸再用同样的方式传给孙子。</strong></p>
<p>P.S 爷爷：<code>tabs</code> ， 爸爸 ： <code>tabs-navs</code> , 孙子: <code>tabs-navs-item</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">'tabs'</span>, &#123;</span><br><span class="line">    props: [<span class="string">'selectedTab'</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div class='tabs'&gt;</span></span><br><span class="line"><span class="string">            &lt;slot/&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    mounted() &#123;</span><br><span class="line">        <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>) =&gt;</span> &#123; <span class="comment">//遍历所有的孩子</span></span><br><span class="line">            <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-navs'</span>) &#123; <span class="comment">//如果是爸爸</span></span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'爷爷的selectedTab是'</span>+<span class="keyword">this</span>.selectedTab)</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab) <span class="comment">//通过爸爸的selectedTab方法，传给儿子</span></span><br><span class="line">            &#125;<span class="keyword">else</span> <span class="keyword">if</span>(vm.$options.name === <span class="string">'tabs-panels'</span>)&#123;</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-navs'</span>, &#123;</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="literal">undefined</span> <span class="comment">//爸爸自己有一个selectedTab属性       </span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-navs'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        SelectedTab(tab) &#123;</span><br><span class="line">            <span class="keyword">this</span>.selectedTab = tab <span class="comment">//通过这个方法，从爷爷那里获取selectedTab</span></span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'爸爸获取到了爷爷的selectedTab是'</span>+<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>)=&gt;</span>&#123; <span class="comment">//同样的方法传给孙子</span></span><br><span class="line">                <span class="keyword">if</span>(vm.$options.name === <span class="string">'tabs-navs-item'</span>)&#123;</span><br><span class="line">                    vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-navs-item'</span>, &#123;</span><br><span class="line">    props: [<span class="string">'name'</span>],</span><br><span class="line">    data () &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab:<span class="literal">undefined</span>      </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-navs-item' :class = '&#123;active&#125;'&gt;   //通过计算属性，判断active</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    computed: &#123;</span><br><span class="line">        active() &#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.selectedTab === <span class="keyword">this</span>.name  <span class="comment">//通过计算属性，判断active</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        SelectedTab(tab)&#123;</span><br><span class="line">            <span class="keyword">this</span>.selectedTab = tab</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">'儿子获取到了从爸爸的selected是'</span>+<span class="keyword">this</span>.selectedTab)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-panels'</span>, &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab:<span class="literal">undefined</span>       </span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-panels'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        SelectedTab(tab)&#123;</span><br><span class="line">            <span class="keyword">this</span>.selectedTab = tab;</span><br><span class="line">            <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>)=&gt;</span>&#123; <span class="comment">//同样的方法传给孙子</span></span><br><span class="line">                <span class="keyword">if</span>(vm.$options.name === <span class="string">'tabs-panels-item'</span>)&#123;</span><br><span class="line">                    vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">Vue.component(<span class="string">'tabs-panels-item'</span>, &#123;</span><br><span class="line">    props: [<span class="string">'name'</span>],</span><br><span class="line">    data () &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab:<span class="literal">undefined</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;div class='tabs-panels-item' :class = '&#123;active&#125;'&gt;</span></span><br><span class="line"><span class="string">        &lt;slot/&gt;</span></span><br><span class="line"><span class="string">    &lt;/div&gt;</span></span><br><span class="line"><span class="string">    `</span>,</span><br><span class="line">    computed:&#123;</span><br><span class="line">        active()&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.selectedTab === <span class="keyword">this</span>.name</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        SelectedTab(tab)&#123;</span><br><span class="line">            <span class="keyword">this</span>.selectedTab = tab</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            selectedTab: <span class="string">'tab1'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs :selectedTab = 'tab1'&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab1' &gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab2' &gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab1'&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab2'&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这样，<code>selectedTab</code>  整个传递的线路，我们就打通了。<code>tabs-panels</code>的方法同理</p>
</li>
<li><p>下面也是重点，我点击<code>tabs-navs-item</code>的时候，孙子要告诉爷爷该切换了，但孙子不能直接告诉爷爷，先告诉爸爸，爸爸再告诉爷爷。</p>
<p><strong>注意：Vue没有冒泡，孙子触发的$emit事件，爸爸是不知道的，所以要用爸爸监听$on孙子，爷爷监听$on爸爸，然后爷    爷再把数据传出去update()</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//孙子</span></span><br><span class="line">onClick()&#123;</span><br><span class="line">    <span class="keyword">this</span>.$emit(<span class="string">'update:selectedTab'</span>, <span class="keyword">this</span>.name) </span><br><span class="line">    <span class="comment">//孙子传出去。</span></span><br><span class="line">    <span class="comment">//name = 'tab1'的作用在这里体现，之前的vm.$options.name其实是 component 的 name</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//爸爸</span></span><br><span class="line">mounted() &#123;</span><br><span class="line">        <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-navs-item'</span>) &#123;</span><br><span class="line">                vm.$on(<span class="string">'update:selectedTab'</span>, (e) =&gt; &#123; <span class="comment">//监听儿子的 update：selectedTab</span></span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">'爸爸知道了你要更新selectedTab是'</span> + e)</span><br><span class="line">                    <span class="keyword">this</span>.$emit(<span class="string">'update:selectedTab'</span>, e) <span class="comment">//爸爸传给爷爷需要改的数</span></span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"><span class="comment">//爷爷</span></span><br><span class="line">mounted() &#123;</span><br><span class="line">        <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>) =&gt;</span> &#123; <span class="comment">//遍历所有的孩子</span></span><br><span class="line">            <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-navs'</span>) &#123;</span><br><span class="line">                <span class="built_in">console</span>.log(<span class="string">'爷爷的selectedTab是'</span> + <span class="keyword">this</span>.selectedTab)</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab) <span class="comment">//通过儿子的selectedTab方法，传给儿子</span></span><br><span class="line">                <span class="comment">//爷爷监听爸爸的update，更新selectedTab属性，更新操作在updatde里面做</span></span><br><span class="line">                vm.$on(<span class="string">'update:selectedTab'</span>,(e)=&gt;&#123; </span><br><span class="line">                    <span class="built_in">console</span>.log(<span class="string">'爷爷知道了爸爸给我的selectedTab是'</span> + e)                    </span><br><span class="line">                    <span class="keyword">this</span>.$emit(<span class="string">'update:selectedTab'</span>,e)</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125; <span class="keyword">else</span> <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-panels'</span>) &#123;</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;,</span><br><span class="line">updated() &#123;  <span class="comment">//更新selectedTab</span></span><br><span class="line">        <span class="keyword">this</span>.$children.forEach(<span class="function">(<span class="params">vm</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-navs'</span>) &#123;    </span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            &#125; <span class="keyword">else</span> <span class="keyword">if</span> (vm.$options.name === <span class="string">'tabs-panels'</span>) &#123;</span><br><span class="line">                vm.SelectedTab(<span class="keyword">this</span>.selectedTab)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//然后体现在 template 里 ，使用 .sync 修饰符</span></span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">'#app'</span>,</span><br><span class="line">    data() &#123;</span><br><span class="line">        <span class="keyword">return</span> &#123;</span><br><span class="line">            value: <span class="string">'tab1'</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">    &lt;tabs :selectedTab.sync = 'value' &gt;  // 在这里更新</span></span><br><span class="line"><span class="string">        &lt;tabs-navs&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab1' &gt;1&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-navs-item name = 'tab2' &gt;2&lt;/tabs-navs-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-navs&gt;</span></span><br><span class="line"><span class="string">        &lt;tabs-panels&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab1'&gt;content 1&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">            &lt;tabs-panels-item name = 'tab2'&gt;content 2&lt;/tabs-panels-item&gt;</span></span><br><span class="line"><span class="string">        &lt;/tabs-panels&gt;</span></span><br><span class="line"><span class="string">    &lt;/tabs&gt;</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
</ul>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="6936d1ca.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          封装和继承
        
      </div>
    </a>
  
  
    <a href="4cf7e60f.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JavaScript里的函数是什么</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/88d55ab5.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
